<template>
  <div class="tab-container">
    <div class="tab-card">
      <div style="width: 50px; height: 50px; overflow: hidden">
        <img :src="imgUrl" alt="" style="border-radius: 50%" />
      </div>
      <div style="margin-left: 10px">
        <div>{{ user.personName }}</div>
        <template>
          <div v-show="user.personType == 0" class="id-card">
            校园卡号:{{ user.cardNumber }}
          </div>
          <div v-show="user.personType == 1" class="id-card">
            身份证号:{{ user.cardNumber }}
          </div>
        </template>
      </div>
    </div>
    <div class="footer-xieyi" @click="getAddXie">
      <div>
        <img src="../assets/xieyi.png" alt="" style="width: 16px; height: 16px;margin-right: 3px;" />
      </div>
      <div style="font-size: 14px; margin-left: 4px; padding-top: 2px">
        用户协议
      </div>
    </div>
    <!-- 修改实名认证 -->
    <div class="Real-name" @click="getUpdateName">
      <div>
        <img src="../assets/rename.png" alt="" style="width: 20px; height: 20px">
      </div>
      <div style="font-size: 14px; margin-left: 4px; padding-top: 2px;color:rgb(34, 180, 224);">
        修改实名
      </div>
    </div>
    <div class="tab-header">
      <!-- 标签头部内容 -->
      <div @click="activateTab(0)" :class="{ active: activeTab == 0 }">
        人员预约
      </div>
      <div @click="activateTab(1)" :class="{ active: activeTab == 1 }">
        车辆预约
      </div>
    </div>
    <div v-show="activeTab == 0" class="tab-box">
      <van-pull-refresh v-model="refreshingTwo" @refresh="onRefreshTwo">
        <van-list ref="chekd" v-model="loadingTwo" :finished="finishedTwo" finished-text="没有更多了" @load="onLoadTwo"
          :error.sync="errorTwo" error-text="请求失败，点击重新加载">
          <!-- 标签内容 -->
          <template>
            <div v-for="(item, index) in dataTwo" class="card"
              :class="item.PerBookedInfo.reservationStatus ? 'ONE' : 'TWO'">
              <!-- 标题日期 -->
              <div class="title">
                <div style="font-weight: 700; color: #000; font-size: 14px">
                  人员预约
                </div>
              </div>
              <!-- 内容 -->
              <div style="display: flex; justify-content: space-between">
                <div class="modile">
                  <div>预约日期:{{ item.PerBookedInfo.reservationTime }}</div>
                  <div>姓名:{{ item.PerBookedInfo.bookedName }}</div>
                  <div>电话:{{ item.PerBookedInfo.bookedPhone }}</div>
                  <div>
                    {{ item.personType }}:{{ item.PerBookedInfo.cardNumber }}
                  </div>
                  <div>预约原因:{{ item.PerBookedInfo.matter }}</div>
                  <div v-show="item.PerBookedInfo.campus == 0">
                    预约校区:本部校区
                  </div>
                  <div v-show="item.PerBookedInfo.campus == 1">
                    预约校区:榆中校区
                  </div>
                  <div v-show="item.PerBookedInfo.campus == 2">
                    预约校区:医学校区
                  </div>
                  <template>
                    <van-tag type="success" v-show="item.PerBookedInfo.personType == 0">本人</van-tag>
                    <van-tag type="primary" v-show="item.PerBookedInfo.personType == 1">陪同人</van-tag>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-show="activeTab == 1" class="tab-box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list ref="chekd" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
          :error.sync="error" error-text="请求失败，点击重新加载">
          <!-- 标签内容 -->
          <template>
            <div v-for="(item, index) in dataOne" class="card" :class="item.reservationStatus ? 'ONE' : 'TWO'">
              <!-- 标题日期 -->
              <div class="title">
                <div style="font-weight: 700; color: #000; font-size: 14px">
                  车辆预约
                </div>
              </div>
              <!-- 内容 -->
              <div class="modile">
                <div>预约日期:{{ item.reservationTime }}</div>
                <div>姓名:{{ item.driverName }}</div>
                <div>电话:{{ item.driverPhone }}</div>
                <div>车牌号:{{ item.licenseNumber }}</div>
                <div>预约原因:{{ item.matter }}</div>
                <div v-show="item.campus == 0">预约校区:本部校区</div>
                <div v-show="item.campus == 1">预约校区:榆中校区</div>
                <div v-show="item.campus == 2">预约校区:医学校区</div>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { getCartList, getFinduser, getPersonFind } from "../api/index";
import { text } from "@/utils/text"; //服务协议
export default {
  data() {
    return {
      activeTab: 0, // 默认激活的标签索引,
      dataOne: [],
      dataTwo: [],
      page: {
        bookedName: "",
        pageNo: 1,
        pageSize: 10,
      },
      loading: false, //true为加载状态
      finished: false, //没有更多 //没有更多
      error: false, //提示错误信息
      refreshing: false, // 下拉 // 是否已加载完所有数据的标识
      loadingTwo: false, //true为加载状态
      finishedTwo: false, //没有更多
      errorTwo: false, //提示错误信息
      refreshingTwo: false,
      user: {},
      total: null,
      pagetwo: {
        bookedPerson: "",
        currPage: 1,
        numPage: 10,
      },
      imgUrl: "",
      show: false,
    };
  },
  created() {
    let uuid = localStorage.getItem("uuid"); //拿到uuid进行实名认证
    let imgUrl = localStorage.getItem("imgUrl");
    if (imgUrl) {
      this.imgUrl = imgUrl;
    } else {
      this.imgUrl = require("../assets/touxiang.png");
    }
    this.page.bookedName = uuid;
    this.pagetwo.bookedPerson = uuid;
    this.getuserApi(); //获取头部信息
  },
  watch: {
    activeTab(newValue, oldValue) {
      //标签页切换就分别初始化不同的列表
      if (newValue == 0) {
        this.onLoadTwo();
      } else {
        this.onLoad();
      }
    },
  },
  methods: {
    activateTab(index) {
      this.activeTab = index;
    },
    //下拉的话refreshing为true
    onRefresh() {
      this.finished = false;
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      if (this.refreshing) {
        this.dataOne = []; //清空数据
        this.refreshing = false; //停止下拉
        this.page.pageNo = 1; //初始化页码
      }
      this.loading = true; //加载数据
      this.getCartListApi(); // 请求后端数据铺设界面
    },
    onRefreshTwo() {
      this.finishedTwo = false;
      // 将 loading 设置为 true，表示处于加载状态
      this.loadingTwo = true;
      this.onLoadTwo();
    },
    onLoadTwo() {
      if (this.refreshingTwo) {
        this.dataTwo = []; //清空数据
        this.refreshingTwo = false; //停止下拉
        this.pagetwo.currPage = 1; //初始化页码
      }
      this.loadingTwo = true; //加载数据
      this.getPersonFindApi(); // 请求后端数据铺设界面
    },
    // 车辆预约信息
    async getCartListApi() {
      this.$toast.loading("加载中"); //vant的加载提示
      let { page } = this;
      let dd = Object.keys(page)
        .map((key) => key + "=" + page[key])
        .join("&"); //转化拼接
      await getCartList(dd)
        .then((res) => {
          if (res.data.code == 200) {
            this.loading = false; // 加载关闭
            this.dataOne = this.dataOne.concat(res.data.data.page.content);
            this.$toast.clear(); //清除加载提示
            ++this.page.pageNo;
            if (!res.data.data.page.content.length) {
              //
              this.finished = true;
              return;
            }
          } else {
            this.finished = true;
            this.$toast.clear(); //清除加载提示
            this.loading = false; // 加载关闭
          }
        })
        .catch((error) => {
          //抛出错误
          this.error = true; //显示点击加载更多
          this.refreshing = false;
          this.loading = false;
        });
    },
    //人员预约信息
    async getPersonFindApi() {
      this.$toast.loading("加载中"); //vant的加载提示
      let { pagetwo } = this;
      let dd = Object.keys(pagetwo)
        .map((key) => key + "=" + pagetwo[key])
        .join("&"); //转化拼接
      await getPersonFind(dd)
        .then((res) => {
          if (res.data.code == 200) {
            this.loadingTwo = false; // 加载关闭
            if (res.data.data.list.length) {
              this.dataTwo = this.dataTwo.concat(res.data.data.list);
            }
            this.$toast.clear(); //清除加载提示
            ++this.pagetwo.currPage;
            if (!res.data.data.list.length) {
              //
              this.finishedTwo = true;
              return;
            }
          } else {
            this.finishedTwo = true;
            this.$toast.clear(); //清除加载提示
            this.loadingTwo = false; // 加载关闭
          }
        })
        .catch((error) => {
          //抛出错误
          console.log(error);
          this.errorTwo = true; //显示点击加载更多
          this.refreshingTwo = false;
          this.loadingTwo = false;
        });
    },
    //   头部登录信息
    async getuserApi() {
      let { page } = this;
      let bookedPerson = page.bookedName;
      let res = await getFinduser({ bookedPerson });
      if (res.data.code == 200) {
        this.user = res.data.data.data;
        this.user.cardNumber = this.user.cardNumber.replace(
          /^(.{3})(?:\w+)(.{4})$/,
          "$1******$2"
        );
      } else {
        this.$toast.fail(`${res.data.msg}`);
      }
    },
    getAddXie() {
      this.$dialog.alert({
        title: "用户协议",
        messageAlign: "left",
        message: `${text}`,
      });
    },
    // 修改实名认证
    getUpdateName() {
      this.$dialog.confirm({
        title: '提示',
        message: '请您慎重修改,每名用户每年仅有两次修改实名机会',
      })
        .then(() => {
          this.$router.push('/rename')
        }).catch(() => {
          // on cancel
        });
    }
  },
};
</script>

<style lang="scss">
.van-dialog__header {
  padding-top: 20px;
  padding-bottom: 15px;
}

.tab-container {
  /* 设置标签容器样式 */
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  margin: 0 auto;
  position: relative;

  // 头部样式
  .tab-card {
    width: 90%;
    height: auto;
    font-size: 14px;
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    color: #2b556f;
    overflow: hidden;
    margin: 20px auto 20px auto;

    img {
      width: 50px;
      height: 50px;
      overflow: hidden;
    }
  }
}

.tab-header {
  /* 设置标签头部样式 */
  width: 90%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.4);
  text-align: center;
  color: #2b556f;
  margin: auto;

  div {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
}

// 列表样式
.tab-box {
  width: 100%;
  margin: 10px auto auto auto;

  .card {
    width: 90%;
    height: auto;
    background-color: #ffffff;
    border-radius: 5px;
    font-size: 12px;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
    padding: 15px;
    margin: 5px auto auto auto;
    position: relative;
    overflow: hidden;

    .modile {
      font-size: 14px;
      margin-top: 10px;

      div {
        line-height: 24px;
      }
    }
  }

  //有效三角样式
  .ONE::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right: 40px solid #2bb966;
    transform: rotate(135deg);
    position: absolute;
    right: -40px;
    top: -50px;
    cursor: pointer;
  }

  .ONE::after {
    content: "有效";
    width: 40px;
    height: 30px;
    font-size: 12px;
    color: #fff;
    /* transform: rotate(45deg); */
    position: absolute;
    right: -10px;
    top: 2px;
    letter-spacing: 2px;
    cursor: pointer;
  }

  //无效三角样式
  .TWO::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right: 40px solid rgb(85, 85, 85);
    transform: rotate(135deg);
    position: absolute;
    right: -40px;
    top: -50px;
    cursor: pointer;
  }

  .TWO::after {
    content: "无效";
    width: 40px;
    height: 30px;
    font-size: 12px;
    color: #fff;
    /* transform: rotate(45deg); */
    position: absolute;
    right: -10px;
    top: 2px;
    letter-spacing: 2px;
    cursor: pointer;
  }
}

.active {
  /* 设置选中标签的样式 */
  font-weight: 700;
  border-bottom: 3px solid #2b556f;
  background-color: #f0f0f0;
}

p {
  width: 90%;
  font-size: 12px;
  text-align: center;
  font-weight: 200;
  height: 20px;
  line-height: 20px;
  margin: 0 auto 0 auto;
}

.footer-xieyi {
  position: absolute;
  top: 25px;
  right: 5%;
  display: flex;
  align-items: center;
  text-align: center;
}

.Real-name {
  position: absolute;
  top: 50px;
  right: 5%;
  display: flex;
  align-items: center;
  text-align: center;
}
</style>
